﻿<html>
<head>
<script type"application/javascript">
	window.onload = function() {
	   document.getElementById('title').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('actor').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('director').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('age').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('genre').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('hasta').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('desde').onkeypress = function(e) {
	       enter( e);
	   };
	   document.getElementById('premiere').onkeypress = function(e) {
	       enter( e);
	   };
	   if ('{{genre}}' != '') {
		   document.getElementById('genre').value = '{{genre}}';
		}
		if ('{{age}}' != '') {
	   		document.getElementById('age').value = '{{age}}';
	   	}
	};
	function desde() {
		if(document.getElementById("hasta").value == "") {
			document.getElementById("hasta").value = document.getElementById("desde").value;
		}
	}
	function hasta() {
		if(document.getElementById("desde").value == "") {
			document.getElementById("desde").value = document.getElementById("hasta").value;
		}
	}

	function enter(e) {
		var ev = e || window.event;
		var key = ev.keyCode;

		if (key == 13)
		{
			buscar();
		}
	}

	function vaciar() {
		document.getElementById("title").value = '';
		document.getElementById("actor").value = '';
		document.getElementById("director").value = '';
		document.getElementById("genre").value = '0';
		document.getElementById("age").value = '0';
		document.getElementById("desde").value = '';
		document.getElementById("hasta").value = '';
		document.getElementById("premiere").checked = false;
	}

	function buscar() {
		vacio = true;
		url ="?"
		if(document.getElementById("title").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'title=' + document.getElementById("title").value
			vacio = false;
		}
		if(document.getElementById("actor").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'actor=' + document.getElementById("actor").value;
			vacio = false;
		}
		if(document.getElementById("director").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'director=' + document.getElementById("director").value;
			vacio = false;
		}
		if(document.getElementById("desde").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'fromyear=' + document.getElementById("desde").value;
			vacio = false;
		}
		if(document.getElementById("hasta").value != "") {
			if(!vacio) {
				url += '&';
			}
			url += 'toyear=' + document.getElementById("hasta").value;
			vacio = false;
		}
		var e1 = document.getElementById("genre");
		var genre = e1.options[e1.selectedIndex].value;
		if(genre != '0') {
			if(!vacio) {
				url += '&'
			}
			url += 'genre=' + genre;
			vacio = false;
		}
		var e2 = document.getElementById("age");
		var age = e2.options[e2.selectedIndex].value;
		if(age != '0') {
			if(!vacio) {
				url += '&'
			}
			url += 'age=' + age;
			vacio = false;
		}

		if(document.getElementById("premiere").checked) {
			if(!vacio) {
				url += '&';
			}
			url += 'premiere=true';
			vacio = false;
		}
		window.location.href = '/busqueda' + url;

	}
</script>
	<title>Búsqueda</title>	
</head>
<body>
	<h1>Búsqueda avanzada</h1>
	<label>Título: </label><input value="{{title}}" id="title" type="text"/>
	<br/>
	<br/>
	<label>Director: </label><input value="{{director}}" id="director" type="text"/>
	<br/>
	<br/>
	<label>Actor: </label><input value="{{actor}}" id="actor" type="text"/>
	<br/>
	<br/>
	<label>Género</label>
	<select id="genre">
		<option value="0">Cualquiera</option>
		{% for genre in genres %}
	  <option value="{{genre.genreName}}">{{genre.genreName}}</option>
	  	{% endfor %}
	</select>
	<br/>
	<br/>
	<label>Año: </label> desde </label><input value="{{fromyear}}" id="desde" type="text" onchange="desde();"/> hasta </label><input value="{{toyear}}" id="hasta" onchange="hasta();" type="text"/>
	<br/>
	<br/>
	<label>Solo estrenos </label><input {% if premiere %} checked {% endif %} id="premiere" type="checkbox"/>
	<br/>
	<br/>
	<label>Edad: </label>
	<select id="age">
		<option value="0">Cualquiera</option>
			{% for edad in edades %}
		<option value="{{edad}}">{{edad}}</option>
		 	{% endfor %}
	</select>
	<br/>
	<br/>
	<input type="button" value="Vaciar búsqueda" onclick="vaciar()"/><input type="button" value="Buscar" onclick="buscar()"/>
	{% if resultado %}
	<div class="resultado">
		<h1>Resultados</h1>
		<ul>
			{% for p in peliculas %}
			<li>{{p.title}} <br/><img src="{{p.artwork}}" width="200"/></li>
			{% endfor %}
		</ul>
		<div class="pagination">
		    <span class="step-links">
		        {% if contacts.has_previous %}
		            <a href="?{{busqueda}}page={{ peliculas.previous_page_number }}">previous</a>
		        {% endif %}

		        <span class="current">
		            Page {{ peliculas.number }} of {{ peliculas.paginator.num_pages }}.
		        </span>

		        {% if peliculas.has_next %}
		            <a href="?{{busqueda}}page={{ peliculas.next_page_number }}">next</a>
		        {% endif %}
		    </span>
		</div>
	</div>
	{% endif %}
</body>
</html>